<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #box{
            width: 600px;
            height: 500px;
            border: 1px solid #999;
            overflow: hidden;
            margin: 0 auto;
            margin-top: 50px;
            border-radius: 50px;
        }
        #box img{
            width: 100px;
            height: 70px;
        }
        #box li{
            height: 60px;
            padding: 20px;
        }
        .left{float: left;}
        .right{
            width: 400px;
            float: right;
        }
    </style>
    <script src="./jquery-3.3.1.min.js"></script>
</head>
<body>
    <h1>JQ 新闻滚动效果</h1>
    <hr>

    <div id="box">
        <li>
            <div class="left"><img src="./imgs/pikaq1.jpg" alt=""></div>
            <div class="right">
                <h3>宠物小精灵 1</h3>
                <p>宠物小精灵日本任天堂开发的掌上游戏,是我的童年<a href="#1">【查看详情】</a></p>
            </div>
        </li>
        <li>
            <div class="left"><img src="./imgs/pikaq2.jpg" alt=""></div>
            <div class="right">
                <h3>宠物小精灵 2</h3>
                <p>宠物小精灵日本任天堂开发的掌上游戏,是我的童年<a href="#1">【查看详情】</a></p>
            </div>
        </li>
        <li>
            <div class="left"><img src="./imgs/pikaq3.jpg" alt=""></div>
            <div class="right">
                <h3>宠物小精灵 3</h3>
                <p>宠物小精灵日本任天堂开发的掌上游戏,是我的童年<a href="#1">【查看详情】</a></p>
            </div>
        </li>
        <li>
            <div class="left"><img src="./imgs/pikaq4.jpg" alt=""></div>
            <div class="right">
                <h3>宠物小精灵 4</h3>
                <p>宠物小精灵日本任天堂开发的掌上游戏,是我的童年<a href="#1">【查看详情】</a></p>
            </div>
        </li>
        <li>
            <div class="left"><img src="./imgs/pikaq5.jpg" alt=""></div>
            <div class="right">
                <h3>宠物小精灵 5</h3>
                <p>宠物小精灵日本任天堂开发的掌上游戏,是我的童年<a href="#1">【查看详情】</a></p>
            </div>
        </li>
        <li>
            <div class="left"><img src="./imgs/pikaq6.jpg" alt=""></div>
            <div class="right">
                <h3>宠物小精灵 6</h3>
                <p>宠物小精灵日本任天堂开发的掌上游戏,是我的童年<a href="#1">【查看详情】</a></p>
            </div>
        </li>
    </div>

    <script>
        
        $(function(){
            setInterval(function(){
                $('#newslist li')
                .last().fadeTo(0,0).hide()
                .prependTo('#newslist').slideDown(1000).fadeTo(1500,1);
            },3000)
        });
    </script>
</body>
</html>